import React, {useEffect, useState} from "react";
import {createDetailedSituation, getSituation} from "../apis/situation";
import {useNavigate} from "react-router-dom";
import {Button, Card, List, message, Radio, Typography} from "antd";

const {Title, Paragraph} = Typography;

const ScenarioSelPage = () => {
  const [situations, setSituations] = useState([]);
  const [selectedIndex, setSelectedIndex] = useState(null);
  const [detailedSituation, setDetailedSituation] = useState(null);
  const navigate = useNavigate();

  useEffect(() => {
    async function fetchSituations() {
      try {
        const data = await getSituation();
        setSituations(data);
      } catch (error) {
        message.error("获取场景列表失败！");
        console.error("Error fetching situations:", error);
      }
    }

    fetchSituations();
  }, []);

  const handleConfirmSelection = async () => {
    if (selectedIndex === null) {
      message.warning("请选择一个场景！");
      return;
    }
    try {
      const data = await createDetailedSituation(selectedIndex);
      setDetailedSituation(data);
      message.success("场景加载成功！");
    } catch (error) {
      message.error("获取场景详情失败！");
      console.error("Error fetching detailed situation:", error);
    }
  };

  const handleStartConversation = () => {
    if (!detailedSituation) {
      message.warning("请先选择场景并确认！");
      return;
    }
    const situation =
      detailedSituation.description +
      "；你扮演" +
      detailedSituation.roles.assistant +
      "；学生扮演" +
      detailedSituation.roles.user;
    navigate("/chat", {
      state: {
        userId,
        chatInfo: {mode: 2, situation},
      },
    });
  };

  return (
    <div
      style={{
        padding: "40px",
        backgroundColor: "#f5f7fa",
        minHeight: "100vh",
      }}
    >
      {/* 场景选择卡片 */}
      <Card
        title={<Title level={3}>选择场景</Title>}
        bordered={false}
        style={{
          marginBottom: "20px",
          borderRadius: "8px",
          boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
        }}
      >
        <List
          dataSource={situations}
          renderItem={(situation, index) => (
            <List.Item style={{padding: "12px 0"}}>
              <Radio.Group
                onChange={() => setSelectedIndex(index)}
                value={selectedIndex}
              >
                <Radio value={index} style={{fontSize: "16px"}}>
                  {situation.name_zh} - {situation.name_en}
                </Radio>
              </Radio.Group>
            </List.Item>
          )}
        />
        <Button
          type="primary"
          onClick={handleConfirmSelection}
          style={{marginTop: "10px"}}
        >
          确认选择
        </Button>
      </Card>

      {/* 具体场景说明 */}
      <Card
        title={<Title level={3}>场景说明</Title>}
        variant="borderless"
        style={{borderRadius: "8px", boxShadow: "0 2px 8px rgba(0,0,0,0.15)"}}
      >
        {detailedSituation ? (
          <Typography>
            <Paragraph style={{fontSize: "16px", color: "#333"}}>
              {detailedSituation.description}
            </Paragraph>
            <Paragraph style={{fontSize: "16px", color: "#333"}}>
              <strong>角色：</strong>
              用户 - {detailedSituation.roles.user}， 助手 -{" "}
              {detailedSituation.roles.assistant}
            </Paragraph>
            <Paragraph style={{fontSize: "16px", color: "#333"}}>
              <strong>先说话：</strong>
              {detailedSituation.first === "user" ? "用户" : "助手"}
            </Paragraph>
          </Typography>
        ) : (
          <Paragraph>请先选择场景并确认。</Paragraph>
        )}
        <Button
          type="primary"
          onClick={handleStartConversation}
          style={{marginTop: "10px"}}
        >
          开始对话
        </Button>
      </Card>
    </div>
  );
};

export default ScenarioSelPage;
